<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="stylesheet" type="text/css" href="css/4.css"/>
     
	<script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/jts.js"></script>
        
         <script>
                $(document).ready(function () {
                
                        $('#demoTable').jTPS( {perPages:[5,12,15,50,'Tất cả'],scrollStep:1,scrollDelay:30,
                                clickCallback:function () {     
                                        // target table selector
                                        var table = '#demoTable';
                                        // store pagination + sort in cookie 
                                        document.cookie = 'jTPS=sortasc:' + $(table + ' .sortableHeader').index($(table + ' .sortAsc')) + ',' +
                                                'sortdesc:' + $(table + ' .sortableHeader').index($(table + ' .sortDesc')) + ',' +
                                                'page:' + $(table + ' .pageSelector').index($(table + ' .hilightPageSelector')) + ';';
                                }
                        });

                        // reinstate sort and pagination if cookie exists
                        var cookies = document.cookie.split(';');
                        for (var ci = 0, cie = cookies.length; ci < cie; ci++) {
                                var cookie = cookies[ci].split('=');
                                if (cookie[0] == 'jTPS') {
                                        var commands = cookie[1].split(',');
                                        for (var cm = 0, cme = commands.length; cm < cme; cm++) {
                                                var command = commands[cm].split(':');
                                                if (command[0] == 'sortasc' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .sortableHeader:eq(' + parseInt(command[1]) + ')').click();
                                                } else if (command[0] == 'sortdesc' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .sortableHeader:eq(' + parseInt(command[1]) + ')').click().click();
                                                } else if (command[0] == 'page' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .pageSelector:eq(' + parseInt(command[1]) + ')').click();
                                                }
                                        }
                                }
                        }

                        // bind mouseover for each tbody row and change cell (td) hover style
                        $('#demoTable tbody tr:not(.stubCell)').bind('mouseover mouseout',
                                function (e) {
                                        // hilight the row
                                        e.type == 'mouseover' ? $(this).children('td').addClass('hilightRow') : $(this).children('td').removeClass('hilightRow');
                                }
                        );

                });


        </script>
        <style>
                body {
                        font-family: Tahoma;
                        font-size: 9pt;
                }
                #demoTable thead th {
                        white-space: nowrap;
                        overflow-x:hidden;
                        padding: 3px;
                }
                #demoTable tbody td {
                        padding: 3px;
                }
        </style>
<title>Insert title here</title>
</head>
<body>
	
<table id="demoTable" style="border: 1px solid #ccc;" cellspacing="0" width="700">
        <thead>
                <tr>
                        <th sort="index">ucode</th>
                        <th sort="date">Date</th>
                        <th sort="description">Room Type</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td align="right">&#x602; \u0602</td>
                        <td>8/31/2008</td>
                        <td>1 Bdrm Condo K (96 left)</td>
                </tr><tr>
                        <td align="right">&#x612; \u0612</td>
                        <td>9/1/2008</td>
                        <td>Studio Condo Q (10 left)</td>
                </tr><tr>
                        <td align="right">&#x614; \u0614</td>
                        <td>9/2/2008</td>
                        <td>2 Bdrm Townhome (7 left)</td>
                </tr><tr>
                        <td align="right">&#x615; \u0615</td>
                        <td>9/3/2008</td>
                        <td>3 Bdrm Condo K/Q/2T (2 left)</td>
                </tr><tr>
                        <td align="right">&#x618; \u0618</td>
                        <td>9/4/2008</td>
                        <td>2 Bdrm Condo w/Den Custom (1 left)</td>
                </tr><tr>
                        <td align="right">&#x620; \u0620</td>
                        <td>9/5/2008</td>
                        <td>2 Bdrm Condo K/K (25 left)</td>
                </tr><tr>
                        <td align="right">&#x621; \u0621</td>
                        <td>9/6/2008</td>
                        <td>3 Bdrm Townhome (3 left)</td>
                </tr><tr>
                        <td align="right">&#x630; \u0630</td>
                        <td>9/7/2008</td>
                        <td>2 Bdrm Condo K/2T (57 left)</td>
                </tr><tr>
                        <td align="right">&#x603; \u0603</td>
                        <td>9/8/2008</td>
                        <td>Hotel Loft K/Q (16 left)</td>
                </tr><tr>
                        <td align="right">&#x607; \u0607</td>
                        <td>9/9/2008</td>
                        <td>2 Bdrm. Loft K/Q/Q,3T/SS (9 left)</td>
                </tr><tr>
                        <td align="right">&#x610; \u0610</td>
                        <td>9/10/2008</td>
                        <td>1 Bdrm Loft K/Q+2T/Murphy (5 left)</td>
                </tr><tr>
                        <td align="right">&#x622; \u0622</td>
                        <td>9/11/2008</td>
                        <td>Hotel Loft Ste K/Q (3 left)</td>
                </tr><tr>
                        <td align="right">&#x625; \u0625</td>
                        <td>9/12/2008</td>
                        <td>2 Bdrm K/Q/Murphy (6 left)</td>
                </tr><tr>
                        <td align="right">&#x626; \u0626</td>
                        <td>9/13/2008</td>
                        <td>Hotel Jr Suite K (4 left)</td>
                </tr><tr>
                        <td align="right">&#x628; \u0628</td>
                        <td>9/14/2008</td>
                        <td>Std Hotel Room 2 Double (27 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x632; \u0632</td>
                        <td>9/15/2008</td>
                        <td>Hotel Loft K/2T (15 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x633; \u0633</td>
                        <td>9/16/2008</td>
                        <td>Studio Q/Murphy (6 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x635; \u0635</td>
                        <td>9/17/2008</td>
                        <td>Exec 2 Bdrm Lft K/K/2Q/SS (1 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x636; \u0636</td>
                        <td>9/18/2008</td>
                        <td>Std Hotel Room Q (34 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x638; \u0638</td>
                        <td>9/19/2008</td>
                        <td>Std Hotel Room 2 Q (28 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x639; \u0639</td>
                        <td>9/20/2008</td>
                        <td>1 Bdrm K/Murphy (19 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x640; \u0640</td>
                        <td>9/21/2008</td>
                        <td>Exec. 2 Bdrm K/2Q/Murphy (2 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x641; \u0641</td>
                        <td>9/22/2008</td>
                        <td>Hotel Superior K (26 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x642; \u0642</td>
                        <td>9/23/2008</td>
                        <td>2 Bdrm Cabin Firepl K/Q+T (1 left)</td>
                </tr><tr class="hideTR">
                        <td align="right">&#x601; \u0601</td>
                        <td>9/24/2008</td>
                        <td>3 Bdrm Cabin K/Q+T/2T (1 left)</td>
                </tr>
        </tbody>
        <tfoot class="nav">
                <tr>
                        <td colspan=4>
                                <div class="pagination"></div>
                                <div class="paginationTitle">Page</div>
                                <div class="selectPerPage"></div>
                                <div class="status"></div>
                        </td>
                </tr>
        </tfoot>
</table>
</body>
</html>